<template>
    <div class="login">
        <div class="section-left">
            <img src="../../public/img/login-img.png">
        </div>
        <div class="section-right">
            <form action="get">
                <div class="other_login">
                    <p>使用合作号登录</p>
                    <a>
                        <img src="../../public/img/login-qq.png"></a>
                    <a>
                        <img src="../../public/img/login-wechat.png"></a>
                </div>
                <div class="user_login">
                    <p>账号密码登录</p>
                    <input type="text" placeholder="账号"  name="uname" v-model='uname'>
                    <input type="password" placeholder="密码" name="upwd" v-model='upwd'>
                    <button @click.prevent='login()'>登录</button>
                </div>
                <div class="other_option">
                    <a>短信验证登录</a>
                    <a>|</a>
                    <router-link to='/reg'>注册</router-link>
                    <a>找回密码</a>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'login',
        data(){
            return{
                uname:'',
                upwd:''
            }
        },
        methods:{
            login(){
                //console.log(this.uname);
                //console.log(this.upwd);
                var url='http://localhost:3000/login'
                this.axios.get(url,{params:{uname:this.uname,upwd:this.upwd}}).then(res=>{
                    alert(res.data.msg)
                    if(res.data.code==1){
                        this.$router.push({path:'/home'})
                    }
                });
            }
        }
    }
</script>
<style>
    *{
     margin: 0;
     padding: 0;
     border-style: none;
     list-style: none;
     box-sizing: border-box;
     outline: none;
    }
    /*主体部分*/
    #section{
        width: 100%;
        height: 616px;
        margin:66px 0 0 350px;
    }
    /*主体——左侧*/
    div.section-left{
        width: 546px;
        height: 481px;
        text-align: right;
        padding-top: 58px;
        float: left;
        margin-left: 100px;
    }
    /*主体——右侧登录界面*/
    div.section-right{
        width: 378px;
        height: 481px;
        float: right;
        margin-right: 150px;
        border: 1px solid #d6d6d6;
        padding: 0 39px;
        box-shadow: 0 0 3px #efefef;
    }
    div.section-right p{
        font-size: 20px;
        color: #666666;
    }
    div.section-right a{
        font-size: 12px;
        color: #757575;
    }
    div.user_login a,div.section-right input{
        display: block;
        font-size: 12px;
        width: 300px;
        height: 40px;
        line-height: 40px;
        border-radius: 3px;
    }
        /*其他登陆方式*/
    div.section-right>form .other_login{
        margin: 35px 0 0 0;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 21px;
    }
    div.other_login a>img{
        margin: 20px 0 0 0;
    }
    div.other_login a:last-child img{
        margin-left: 24px;
    }
        /*账号密码登录*/
    div.user_login{
        margin-top: 26px;
    }
    div.user_login input{
        border: 1px solid #c8c8c8;
        padding-left: 12px;
        font-size: 12px;
    }
    div.user_login input:nth-child(2){
        margin:21px 0 10px 0;
    }
        /*登录按钮*/
    div.user_login button{
        color: #ffffff;
        background-color: #0092d8;
        text-align: center;
        padding: 12px 135px;
        border-radius: 5px;
        margin:20px 0;
    }
        /*其他选项*/
    div.other_option{
        float: left;
    }
    div.other_option a{
        padding-right: 10px;
        text-decoration: none;
    }
    div.other_option a:last-child{
        margin-left: 120px;
    }
</style>